<template>
  <view class="wrap" v-if="account != '' && shenheStatus == 0">
    <view class="card">
      <view class="card_massage">
        <image mode="aspectFill" :src="pic_url"></image>
        <view>
          <view class="card_name">{{ name }}</view>
          <view class="card_type">{{
            card_type == 1 ? "核销卡" : "礼品卡"
          }}</view>
        </view>
      </view>
      <view class="card_account">{{ account }}</view>
      <image :src="bg_url"></image>
    </view>
    <view class="card_write_off" v-if="card_type == 1">
      <view>
        <view>已核销</view>
        <view>{{ use_num }}</view>
      </view>
      <view>
        <view>剩余次数</view>
        <view>{{ left_num }}</view>
      </view>
    </view>
    <view class="shop-card">
      <view class="">
        <view
          @click="$utils.toUrl('/goods/goods/goods?id=' + item.id)"
          class="item flex-x-sb"
          v-for="item in goods_list"
          :key="item.id"
        >
          <image :src="item.cover_pic" mode="aspectFill"></image>
          <view class="right">
            <view class="info-title text-more-1">
              {{ item.name }}
            </view>
            <view class="flex-x-sb guige">
              <view class="text-more-2">
                <span v-for="(str, index) in item.attr_group_list" :key="index">
                  <span>{{ str.attr_list[0].attr_name }}</span>
                  <span
                    v-show="index < item.attr_group_list.length - 1"
                    style="margin: 0 10rpx"
                    >|</span
                  >
                </span>
              </view>
              <view>X1</view>
            </view>
            <view class="flex-y-center flex-x-sb">
              <view class="price">¥{{ item.price }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="card_btn" @click.stop="submitClerk">
      <view>确认核销</view>
    </view>
    <login-modal></login-modal>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      id: 0,
      pic_url: "",
      bg_url: "",
      name: "",
      account: "",
      use_num: "",
      left_num: "",
      card_type: 1,
      goods_list: [],
    };
  },
  onLoad(e) {
    const token = uni.getStorageSync("token");
    if (token) {
      if (e.scene) {
        let scene = decodeURIComponent(e.scene),
          params = this.$utils.sceneDecode(scene);
        if (params.id) {
          this.id = params.id;
          this.getCard();
        }
      }
    }
  },
  methods: {
    getCard() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$allrequest.writeOffCode
        .getCard({ sale_id: this.id })
        .then((res) => {
          if (res.code === 0) {
            this.pic_url = res.data.pic_url;
            this.bg_url = res.data.bg_url;
            this.name = res.data.name;
            this.account = res.data.account;
            this.use_num = res.data.use_num;
            this.left_num = res.data.left_num;
            this.card_type = res.data.card_type;
            this.goods_list = res.data.goods_list;
          }
        })
        .catch((res) => {
          setTimeout(() => {
            this.$utils.toUrl("/pages/home/home", "switchtab");
          }, 3000);
        })
        .then(() => {
          uni.hideLoading();
        });
    },
    submitClerk() {
      uni.showModal({
        title: "提示",
        content: "是否确认核销",
        success: (ress) => {
          if (ress.confirm) {
            uni.showLoading({
              title: "请稍等",
              mask: true,
            });
            this.$allrequest.writeOffCode
              .clerkCard({ sale_id: this.id })
              .then((res) => {
                uni.hideLoading();

                setTimeout(() => {
                  this.$utils.toast(res.msg);
                },500);

                if (res.code === 0) {
                  this.getCard();
                }
              })
              .catch((err) => {
                uni.hideLoading();
                setTimeout(() => {
                  this.$utils.toUrl("/pages/home/home", "switchtab");
                }, 3000);
              });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-card {
  padding: 0 24rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
  > view {
    .title {
      margin-top: 30rpx;
      line-height: 40rpx;
      font-size: 28rpx;
      font-weight: 600;
    }
    .item {
      padding: 30rpx 0;
      border-bottom: 1px solid #f1f1f1;
      > image {
        width: 166rpx;
        height: 166rpx;
        background: #f2f2f2;
        opacity: 1;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
      .right {
        flex: 1;
        width: 0;

        .info-title {
          font-size: 28rpx;
          line-height: 34rpx;
        }
        .guige {
          margin-top: 10rpx;
          font-size: 24rpx;
          line-height: 34rpx;
          height: 68rpx;
          color: #8c8c8c;
          > .text-more-2 {
            flex: 1;
            margin-right: 100rpx;
          }
        }
        .price {
          line-height: 60rpx;

          font-size: 32rpx;
          font-weight: 600;
        }
        .right-bt {
          width: 152rpx;
          height: 60rpx;
          border: 2rpx solid #f60313;
          border-radius: 120rpx;

          font-size: 26rpx;
          color: #f0250e;
        }
      }
    }
  }
  > view:nth-child(2) {
    .item {
      view {
        color: #bfbfbf !important;
      }
    }
  }
}
.wrap {
  padding: 36rpx 24rpx;
}
.card {
  width: calc(351rpx * 2);
  height: calc(190rpx * 2);
  border-radius: 20rpx;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30rpx;
  position: relative;
  overflow: hidden;
}
.card > image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.card_massage,
.card_write_off {
  display: flex;
}
.card_massage image {
  width: calc(46rpx * 2);
  height: calc(46rpx * 2);
  margin-right: 12rpx;
  border-radius: 50%;
}
.card_massage > view {
  color: #fff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.card_name {
  font-size: 32rpx;
  font-weight: 600;
}
.card_type {
  font-size: 28rpx;
  font-weight: 400;
}
.card_account {
  font-size: 26rpx;
  color: #fff;
  font-weight: 600;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.card_write_off {
  margin: calc(30rpx * 2) 0rpx calc(71rpx * 2);
}
.card_write_off > view {
  width: 100%;
  text-align: center;
}
.card_write_off view view:first-child {
  font-size: 26rpx;
  font-weight: 400;
  color: #8c8c8c;
  margin-bottom: 16rpx;
}
.card_write_off view view:last-child {
  font-size: 32rpx;
  font-weight: 500;
  color: #f0250e;
}

.card_btn {
  width: calc(339rpx * 2);
  height: calc(40rpx * 2);
  border-radius: 88rpx;
  background: #f0250e;
  color: #fff;
  text-align: center;
  line-height: calc(40rpx * 2);
  margin: 0 12rpx;
}
</style>
